<template>
  <el-drawer
    :visible.sync="visible"
    :title="title"
    :modal-append-to-body="true"
    :append-to-body="true"
    :destroy-on-close="false"
    :modal="true"
    :wrapperClosable="false"
    size="650px"
    @closed="closed"
    >
      <div style="padding: 10px;">
        <div style="font-size: 14px;color: #333333;">主机名称:<span style="font-size: 14px;font-weight: bold;padding-left: 5px;">{{terminal.name}}</span></div>
      </div>

      <div style="padding: 10px;">
        <div class="list-header">
          <el-row :gutter="20">
            <el-col :span="16"><div class="grid-content bg-purple">GPU列表</div></el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple" style="text-align: right;">
                <span style="display: inline;margin-right: 5px; margin-top: 0px;">路数限制:</span>
                <el-switch
                  v-model="isLimit"
                  active-value="1"
                  inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#e5e2e8"
                  @change="change"
                  >
                </el-switch>
              </div>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-table
            :data="tableData"
            :show-header="false"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="名称"
              >
              <template slot-scope="scope">
                {{scope.row.name}}-({{scope.row.index}})
              </template>
            </el-table-column>

            <el-table-column
              prop="percentage"
              label="使用状态"
              >
              <template slot-scope="scope">
              <div class="progress" >
                <div  class="progress-bar progress-bar-striped bg-info progress-bar-animated" style="width: 100%;">
                    空闲 {{scope.row.limit -  scope.row.used }}
                </div>
              </div>
              </template>
            </el-table-column>

            <el-table-column prop="limit" label="限制路数" width="150" >
              <template slot-scope="scope">
               <el-input-number :min="1" :max="maxLimit" :loading="loading"   @change="handleOnChange(scope.row)"  v-model="scope.row.limit" style="width: 110px;"/>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

  </el-drawer>
</template>

<script>

  import {
    saveTerminal,
  } from '@/api/biz/terminal'
  export default {
    name: 'ResourceDrawer',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{
    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.terminal.id = value.data.id || ''
            this.terminal.name = value.data.name || ''
            this.terminal.ip = value.data.ip || ''
            this.terminal.port = value.data.port || ''
          }
        },
        immediate: true,
        deep: false
      }
    },
    data(){
      return {
        visible:false,
        title:'资源管理',
        loading:false,
        terminal: {
          id: '',
          name: '',
          ip:'',
          port:''
        },
        isLimit:'',
        maxLimit:2,
        tableData: [],
        signalingDialog: {
          visible: false,
          type: '0',
          data: {},
          terminal:{}
        },
      }
    },
    created() {
      this.load()
    },
    methods:{
      load(){
        this.loading=true
        fetch(`http://${this.terminal.ip}:${this.terminal.port}/Renderers/Any/Gpu/list`, {
            method: "POST",
            headers: { "Content-type": "application/json" },
        }).then(res => {
          if (!res.ok) { throw Error(res.statusText) }
          return res.json()
        }).then(json => {
          if(json.code==200 && json.result){
            this.tableData=json.result
          }else{
            this.tableData=[]
          }
        }).catch((error) => {
          this.$message({
            type: 'error',
            message:error
          })
        }).finally(() => {
          this.loading = false
        });
      },
      change(val){
        if(val==0){
          this.maxLimit=9999
        }else{
          this.maxLimit=5
        }
      },
      handleStart: function(data) {
          this.loading = true
          restartServer({
            id: data.id
          }).then(response => {
            this.$message({
              message: '成功',
              type: 'success',
              duration: 500
            })
            this.load()
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {
            this.loading = false
          })
      },
      handleStop: function(data) {
        this.$confirm('重启服务，将会影响正在使用该服务的用户，确认重启【' + data.name + '】吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          stopServer({
            id: data.id
          }).then(response => {
            this.$message({
              message: '成功',
              type: 'success',
              duration: 500
            })
            this.load()
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {
            this.loading = false
          })
        })
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }

</script>

<style  scoped>

  .el-dialog__header {
      border-bottom: 1px solid #aaaaaa;
  }

  .el-dialog__body {
      padding: 0px 0px;
  }

  .el-dialog__footer {
      padding: 10px;
      padding-top: 10px;
      border-top: 1px solid #aaaaaa;
  }

  .el-drawer__header {
      padding: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid  #aaaaaa;
      font-weight: bold;
      font-size: 1rem;
      margin-bottom: 0.625rem;
      color: #333333;
  }


  .list-header{
    border-left: 5px solid #02a7f0;
    padding-left: 5px;
    line-height: 30px;
    height: 30px;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
  }



  .progress {
      width: 100%;
      height: 40px;
      background: #e9ecef;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      overflow: hidden;
      text-align: center;

      .progress-bar{
        height: 100%;
        line-height: 40px;
        overflow: hidden;
        text-align: center;
        color: #fff;
      }

      .progress-bar-striped {
            background-image: linear-gradient(45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);
            background-size: 1rem 1rem;
      }

      .bg-info {
          background-color: #17a2b8;
      }

      .progress-bar-animated {
          animation: progress-bar-striped 4s linear infinite;
          -webkit-animation: progress-bar-striped 4s linear infinite;
      }
      @keyframes progress-bar-striped {
         0% {
                background-position: 75% 100%
            }
        50% {
                background-position: 50% 75%
            }
        100%{
                background-position: 25% 50%
            }
      }
  }

</style>
